/*
 * @Author: nqx2007 fenglimima334@163.com
 * @Date: 2023-12-10 10:38:00
 * @LastEditors: nqx2007 fenglimima334@163.com
 * @LastEditTime: 2023-12-12 20:55:26
 * @FilePath: /operator-manager/src/pages/CouponManage/CouponList/index.tsx
 * @Description: 优惠券管理-自营优惠券
 */

import { getSelfCouponList } from '@/services';
import { defaultPagination, defaultTableData } from '@/utils/globalConstants';
import { ProFormText, QueryFilter } from '@ant-design/pro-components';
import type { FormInstance } from 'antd';
import { Table } from 'antd';
import { ColumnsType } from 'antd/es/table';
import { useEffect, useRef, useState } from 'react';
import dayjs from 'dayjs';
import { couponTypeMap } from '../constants';
import { CouponEnum,SelfCouponTableDataType, SelfCouponEnum } from '../type.d';

export default function SelfCouponListPage() {
  const couponSearchRef = useRef<FormInstance>();
  const [tableData, setTableData] = useState({ ...defaultTableData });
  const [paginationCurrent, setPagination] = useState({ ...defaultPagination });
  //获取优惠券列表数据
  const fetchSelfCouponList = async (params = {}) => {
    const searchValues = couponSearchRef?.current?.getFieldsValue() ?? {};
    const searchParams = {
      ...searchValues,
      ...paginationCurrent,
      ...params,
    };
    console.log('进行搜索的条件为', searchParams);
    const result = await getSelfCouponList(searchParams);
    const { dataList, totalResult } = result?.data ?? {};
    setTableData({
      dataList,
      total: totalResult,
    });
  };
  const columns: ColumnsType<SelfCouponTableDataType> = [
    {
      title: '券ID',
      dataIndex: 'id',
      width: 150,
    },
    {
      title: '优惠券',
      dataIndex: CouponEnum.NAME,
      width: 150,
    },
    {
      title: '类型',
      dataIndex: CouponEnum.TYPE,
      width: 150,
      render: (value) => {
        const showValue = value ?? 'undefined';
        return showValue !== 'undefined' ? (
          <>{couponTypeMap.get(value)?.text}</>
        ) : (
          '-'
        );
      },
    },
    {
      title: '优惠券面额',
      dataIndex: SelfCouponEnum.AMOUNT,
      width: 150,
      render: (value) => {
        const showValue = value ?? 'undefined';
        return showValue !== 'undefined' ? (
          <>¥ {value}</>
        ) : (
          '-'
        );
      },
    },
    {
      title: '购买金额',
      dataIndex: SelfCouponEnum.PURCHASE,
      width: 150,
      render: (value) => {
        const showValue = value ?? 'undefined';
        return showValue !== 'undefined' ? (
          <>¥ {value}</>
        ) : (
          '-'
        );
      },
    },
    {
      title: '活动时间',
      dataIndex: SelfCouponEnum.ACTIVE_TIME,
      width: 150,
      render:(value)=>{
        return value?dayjs(value).format('YYYY-MM-DD HH:mm:ss'):'-'
      }
    },
    {
      title: '有效期至',
      dataIndex: SelfCouponEnum.VALIDATE_TIME,
      width: 150,
      render:(value)=>{
        return value?dayjs(value).format('YYYY-MM-DD HH:mm:ss'):'-'
      }
    },
    {
      title: '总数量',
      dataIndex: SelfCouponEnum.TOTAL_COUNT,
      width: 150,
    },
    {
      title: '已领取',
      dataIndex: CouponEnum.COUNT_DRAW,
      width: 150,
    },
    {
      title: '已核销',
      dataIndex: CouponEnum.COUNT_USED,
      width: 150,
    },
    {
      title:'操作',
      dataIndex:'action',
      fixed:'right',
      width:150,
      render:()=>{
        return <a>查看</a>
      }
    }
  ];
  useEffect(() => {
    fetchSelfCouponList();
  }, []);

  return (
    <>
      <QueryFilter
        defaultCollapsed
        split
        formRef={couponSearchRef}
        submitter={{
          render: (_, dom) => {
            return dom.reverse();
          },
        }}
        onFinish={async (values) => {
          fetchSelfCouponList({ ...values });
        }}
        onReset={() => {
          fetchSelfCouponList();
        }}
      >
        <ProFormText name={CouponEnum.NAME} label="优惠券" />
      </QueryFilter>
      <div style={{padding:'20px'}}>
        <Table
          rowKey={SelfCouponEnum.ID}
          dataSource={tableData.dataList}
          columns={columns}
          scroll={{ x: 'max-width' }}
          pagination={{
            pageSize: paginationCurrent.pageSize,
            current: paginationCurrent.page,
            pageSizeOptions: [20, 50, 100],
            showQuickJumper: true,
            showSizeChanger: true,
            onChange: (page, pageSize) => {
              setPagination({ page, pageSize });
              fetchSelfCouponList({ page, pageSize });
            },
          }}
        />
      </div>
    </>
  );
}
